<%@ include file="includes/head.jsp" %>	

<span id="status">Hola mundo...</span>

<hr/>

<a href="/">Home</a>
 <div id="links"> 
 <a href="http://google.com">Google</a> 
 <a href="http://ubuntu.com">Ubuntu</a> 
 <a href="http://debian.org">Debian</a> 
</div>

<hr/>

<div id="frases">
 <div>Hola mundo!</div>
 <div>Foo bar</div>
 <div>Lorem Ipsum</div>
</div>

<hr/>

<form>
 <input type="text" id="nombre" value="Javier" onmouseover="this.focus();"/>
 <input type="text" id="apellidos" value="Perez" onmouseover="this.focus();"/>
</form>
<a href="#" onclick="document.getElementById('nombre').focus()">Nombre</a>
<a href="#" onclick="document.getElementById('apellidos').focus()">Apellidos</a> 

<hr/>

<input type="text" id="texto" />
<input type="button" value="Crear" onclick="crear()" />
<ul id="lista"></ul>

<hr/>

<a id="eliminar" href="casa.html">Casa</a>

<hr/>

<div id="fecha"></div>

<script>

	function init(){
		//alert('Hello World');
		document.write("<h1>Hello World</h1>");
		var el = document.getElementById("status");
		console.info("Hemos cargado la variable"+el);
		var el2 = document.getElementById("status444");
		if (el2 == undefined){
			console.error("No hemos encontrado el elemento con id status444.");
		}
		
		console.log(el.innerHTML);	
		
		
		// Obtenemos el elemento con id "links" var 
		 links = document.getElementById("links"); 
		 // Ahora obtenemos todos los elementos con tag A que hay 
		 // dentro del elemento 'el' var 
		 as = links.getElementsByTagName("a"); 
		 // Y finalmente recorremos el array de elementos para 
		 // cambiarles el color a cada uno 
		 for (var i=0; i<as.length; i++) { 
		 as[i].style.color = 'pink'; // negro 
		 
		// Creamos el array de nombres
		 var nombres = ['Luis','Javier','Sancho','Roberto','Rafael','Manuel'];
		 // Unimos todos los elementos separándolos por comas
		 var juntos = nombres.join(", ");
		 // Y lo mostramos
		 alert(juntos); 	
		 


		 var juntos = "Luis, Javier, Sancho, Roberto";
		 var nombres = juntos.split(", ");
		 for (var i=0; i <nombres.length;i++){
			 console.log(nombres[i]);
		 }

		 //Truco: Usados ambos métodos conjuntamente podremos crear una función
		 //para sustituir un texto por otro en una cadena dada: 

		 function str_replace(cadena, cambia_esto, por_esto) {
		  return cadena.split(cambia_esto).join(por_esto);
		 }
		 alert(str_replace('Hola mundo!','mundo','world')); 

		// Creamos la funcion para añadir eventos
		 function nuevo_evento(elemento, evento, funcion) {
		  if (elemento.addEventListener) {
		  elemento.addEventListener(evento, funcion, false);
		  } else {
		  elemento.attachEvent("on"+evento, funcion);
		  }
		  }
		 // Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclick
		  var divs = document.getElementById("frases").getElementsByTagName("DIV");
		  // Recorremos todos los divs
		  for (var i=0; i<divs.length; i++) {
		  // Añadimos el evento onclick al div
		  nuevo_evento(divs[i], "click", function(){
		  // Hacemos que muestre el contenido del DIV
		  alert(this.innerHTML); }
		  );
		  }
		 

		// Obtenemos el elemento
		  var el = document.getElementById("eliminar");
		  // Obtenemos el padre de dicho elemento
		  // con la propiedad “parentNode”
		  var padre = el.parentNode;
		  // Eliminamos el hijo (el) del elemento padre
		  padre.removeChild(el);  
		 } 	
		 
		 
		 setInterval(function(){
			 document.getElementById("fecha").innerHTML = new Date();
			 },2000);
		 
		// Pedimos al usuario que introduzca su nombre
		 var nombre = prompt("Introduzca su nombre");
		 // Pedimos confirmación
		 if (confirm("¿Seguro que su nombre es "+nombre+"?")) {
		  alert("Hola "+nombre);
		 }
		 
	}
	
	 function crear() {
		 // Obtenemos el valor entrado en la caja de texto
		 var valor = document.getElementById("texto").value;
		 // Creamos un nuevo elemento LI var
		 li = document.createElement("LI");
		 // Añadimos el valor introducido al nuevo elemento
		 li.innerHTML = valor;
		 // Añadimos el elemento LI a la lista UL
		 var ul = document.getElementById("lista");
		 ul.appendChild(li);
		 // Vaciamos la caja de texto
		 document.getElementById("texto").value = "";
	 }	
	
	window.onload = init();
	
</script>

<%@ include file="includes/footer.jsp" %>	